<template>
  <Panel>
    <template #title> <span>商品添加</span> </template>
    <template #content>
      <div>
        <el-form ref="form" :model="goodsForm" label-width="80px" size="mini">
          <el-form-item label="商品名称">
            <el-input v-model="goodsForm.name"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select v-model="goodsForm.cate" placeholder="请选择商品分类">
              <el-option
                v-for="item in categories"
                :key="item.cateName"
                :label="item.cateName"
                :value="item.cateName"
              ></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input-number
              v-model="goodsForm.price"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload
              action="http://127.0.0.1:5000/goods/goods_img_upload"
              list-type="picture-card"
              :on-success="handleAvatarSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="goodsForm.desc"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加商品</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </Panel>
</template>

<script>
import { getAllCate, addProduct } from '@/api/pro.js'

export default {
  data() {
    return {
      goodsForm: {
        name: '',
        cate: '',
        price: '',
        desc: '',
        imgUrl: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      categories: []
    }
  },
  created() {
    this.getCates()
  },
  methods: {
    async getCates() {
      const data = await getAllCate()
      console.log(data)
      this.categories = data.categories
    },
    async onSubmit() {
      console.log(this.goodsForm)
      const data = await addProduct({
        name: this.goodsForm.name,
        category: this.goodsForm.cate,
        price: this.goodsForm.price + '',
        imgUrl: this.goodsForm.imgUrl,
        goodsDesc: this.goodsForm.desc
      })
      console.log(data)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      // 删除本地数组中的数据
      // const i = this.goodsForm.imgUrl.findIndex(item => item === file.name)
      // this.goodsForm.imgUrl.splice(i, 1)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleAvatarSuccess(res, file) {
      // 成功之后保存返回的图片
      this.goodsForm.imgUrl = res.imgUrl
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 480px;
}
</style>
